<template>
  <div class="bottom-charts">
    <div class="bc-chart-item">
      <div class="bcci-header">路口拥堵程度</div>
      <dv-water-level-pond :config="config1" class="dv-water-level-pond" />
    </div>
    <dv-decoration-2 class="decoration-1" :reverse="true" style="width: 5px" />

    <div class="bc-chart-item">
      <div class="bcci-header">通行速度</div>
      <dv-charts :option="config2" />
    </div>

    <dv-decoration-2 class="decoration-2" :reverse="true" style="width: 5px" />

    <div class="bc-chart-item">
      <div class="bcci-header">路口流量统计</div>
      <dv-conical-column-chart
        :config="config3"
        class="dv-conical-column-chart"
      />
    </div>

    <dv-decoration-2 class="decoration-3" :reverse="true" style="width: 5px" />

    <div class="bc-chart-item">
      <div class="bcci-header">红绿灯剩余时间</div>
      <dv-percent-pond :config="config4" class="dv-percent-pond" />
      <dv-digital-flop :config="config" style="margin-top: -40px" />
    </div>
  </div>
</template>

<script>
export default {
  name: "BottomCharts",
  data() {
    return {
      timer: 66,
      total_times: [100, 100],
      stop: false,

      config1: {
        data: [66, 45],
        shape: "roundRect",
      },
      config2: {
        // title: {
        //   text: "通行速度",
        //   style: {
        //     fill: "#fff",
        //   },
        // },
        series: [
          {
            type: "gauge",
            data: [{ name: "itemA", value: 20 }],
            center: ["50%", "55%"],
            axisLabel: {
              formatter: "{value}km/h",
              style: {
                fill: "#fff",
              },
            },
            axisTick: {
              style: {
                stroke: "#fff",
              },
            },
            max: "30",
            animationCurve: "easeInOutBack",
          },
        ],
      },
      config3: {
        data: [
          {
            name: "机动车",
            value: 120,
          },
          {
            name: "非机动车",
            value: 71,
          },
          {
            name: "行人",
            value: 55,
          },
        ],
        img: [
          require("../../assets/img/motor.png"),
          require("../../assets/img/no-motor.png"),
          require("../../assets/img/pedestrain.png"),
        ],
        showValue: true,
      },
      config4: {
        value: 66,
        borderWidth: 5,
        borderRadius: 10,
        borderGap: 5,
        lineDash: [10, 2],
        colors: ["green", "green"],
        formatter: "{value}%",
      },
      config: {
        number: [66],
        content: "{nt}s",
      },
    };
  },
  methods: {
    set_bt_chart4_data(total_times, left_time, stop) {
      this.total_times = total_times;
      this.stop = stop;
      this.time = left_time;
      if (this.timer != "") {
        clearInterval(this.tiemr);
      }
      this.timer = setInterval(() => {
        // console.log(this.total_times)
        this.time--;
        if (this.time == 0) {
          this.time = this.stop ? this.total_times[1] : this.total_times[1];
          this.stop = !this.stop;
        }
        this.config4 = {
          value: this.stop
            ? Math.round((this.time / this.total_times[0]) * 100)
            : Math.round((this.time / this.total_times[1]) * 100),
          borderWidth: 5,
          borderRadius: 10,
          borderGap: 5,
          lineDash: [10, 2],
          colors: this.stop ? ["red", "red"] : ["green", "green"],
          formatter: "{value}%",
        };
        this.config = {
          number: [this.time],
          content: "{nt}s",
        };
      }, 1000);
    },
  },
  mounted() {
    this.set_bt_chart4_data([100, 100], 10, false);
  },
};
</script>

<style lang="less">
.bottom-charts {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .bc-chart-item {
    width: 25%;
    height: 100%;
    padding-top: 0px;
    box-sizing: border-box;
  }

  .bcci-header {
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 18px;
    font-weight: 700;
  }

  // .dv-active-ring-chart {
  //   height: calc(~"100% - 80px");
  // }
  .dv-water-level-pond {
    // height: calc(~"100%");
    height: 80%;
    width: 90%;
    margin-top: 10px;
    margin-left: calc(~"100% / 20");
  }
  .dv-percent-pond {
    height: 40%;
    width: 90%;
    margin-top: 50px;
    margin-left: calc(~"100% / 20");
  }
  .dv-conical-column-chart {
    height: 80%;
  }

  .label-tag {
    height: 30px;
  }

  .active-ring-name {
    font-size: 18px !important;
  }

  .decoration-1,
  .decoration-2,
  .decoration-3 {
    display: absolute;
    left: 0%;
  }
}
</style>
